<script setup>
const props = defineProps({
  kind: {
    type: String,
    required: true,
    default: 'info'
  },
  txt: {
    type: String,
    required: true,
    default: '这是一条没的内容的提示'
  }
})

let logo
if(props.kind === 'success') {
  logo = 'checkmark_circle_fill'
} else if(props.kind === 'error') {
  logo = 'multiply_circle_fill'
} else if(props.kind === 'warn') {
  logo = 'exclamationmark_circle_fill'
} else {
  logo = 'info_circle_fill'
}
</script>

<template>
  <transition name="fade-ud" appear>
    <div class="msg-main">
      <div :class="['msg-box', props.kind]">
        <div class="msg-logo"><i :class="['iconfont', 'fs20', 'logo-size', logo]"></i></div>
        <div class="msg-text">{{props.txt}}</div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
.success {background-color: #F0F9EB; color: #67C23A;}
.info {background-color: #F4F4F5; color: #909399;}
.warn {background-color: #FDF6EC; color: #E6A23C;}
.error {background-color: #FEF0F0; color: #F56C6C;}
.msg-main {width: calc(100% - 30px); position: fixed; top: 15px; z-index: 10; margin: 0 15px;}
.msg-box {width: 100%; height: 40px; display: flex; display: -webkit-flex; justify-content: center; align-items: center; border-radius: 5px;}
.msg-logo {width: 30px; padding-top: 2px;}
.logo-size {font-size: 18px;}
.msg-text {line-height: 20px;}
</style>
